<template>
  <div class="all-page-heiht" >
    <el-row><h1>用户信息查看</h1></el-row>
    <el-card class="margin-top">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        class="margin-top"
        v-loading ="loading"
      > 
        <el-table-column type="expand" label="用户详情" width="120">
          <template #default="props">
            <el-form class="demo-table-expand" inline label-position="left">
              <el-form-item
                v-for="(item, index) in tempTableData1"
                :key="index"
                :label="item.label"
              >
                <span>
                  <el-tag effect="plain">{{ props.row[item.prop]}}</el-tag>
                </span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="120" />
        <el-table-column prop="username" label="使用的用户名" width="123" />
        <el-table-column prop="gender" label="性别" width="240" />
        <el-table-column prop="phone" label="联系电话" />
        <el-table-column label="操作">
          <template #default="props">
            <el-button
              size="small"
              type="warning"
              @click="detailDialogBtn(props.row)"
              >参与状态</el-button
            >
            <el-button
              size="small"
              type="success"
              @click="userKillBtn(props.row)"
              >秒杀记录</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-pagination
          :page-size="pageSize"
          layout="total,prev, pager, next"
          :total="total"
           @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-row>

      <!-- 用户申请记录弹出框 -->
      <el-dialog
        v-model="userDetailDialogVisible"
        :title="tempusername + '的申请记录'"
        
      >
        <h1>申请活动</h1>
        <el-table 
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        :data="bookRecordsData">
        <el-table-column
          property="createTime"
          label="申请时间"
         
        ></el-table-column>
         <el-table-column
          property="userName"
          label="申请用户"
         
        ></el-table-column>
          <el-table-column
          property="activityName"
          label="活动名称"
        ></el-table-column>
        <el-table-column label="状态" prop="status"></el-table-column>
      </el-table>
        <el-row class="el-row-center"> <el-pagination
              :page-size="bookRecord_pageSize"
              layout="total, prev, pager, next"
              :total="bookRecord_total"
              @current-change="book_handleCurrentChange"
          >
      </el-pagination></el-row>
      </el-dialog>
<!-- 用户的秒杀记录 -->
  <el-dialog v-model="myKillDialogVisible"  :title="tempusername + '的秒杀记录'" >
         <el-card>
                <el-table
                 :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
               :data="mySuccesstableData">
        <el-table-column
          property="createTime"
          label="秒杀时间"
         
        ></el-table-column>
         <el-table-column
          property="userName"
          label="秒杀用户"
        ></el-table-column>
          <el-table-column
          property="activityName"
          label="活动名称"
        ></el-table-column>
        <el-table-column label="状态" prop="status"></el-table-column>
       
      </el-table>
        <el-row class="el-row-center"> <el-pagination
              :page-size="myKillpageSize"
              layout="total, prev, pager, next"
              :total="myKilltotal"
              @current-change="MyKillhandleCurrentChange"
          >
      </el-pagination></el-row>

           </el-card>
  </el-dialog>
    </el-card>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs } from "vue";
import { ApiUserInfoList,ApiGetSearchUser,ApiGetUserRecordById,ApiGetUserSuccessById } from "@/api/index";
import {errorMessage, warnMessage} from "@/utils/messageTips"
export default defineComponent({
  name: "UserInfo",
  setup() {
    let usedInfo = reactive<IGPageInfo>({
      pageNum: 1,
      total: 2,
      pages: 2,
      pageSize: 15,
    });
let tempusername = ref<string>("");
    let loading = ref<boolean>(false);
    let tableData = ref([]);
    const getUserInfo = async () => {
      loading.value =true
      const { data:res } = (await ApiUserInfoList(usedInfo.pageNum)) as Record<
        string,
        any
      >;
      tableData.value = res.list.map((item:any)=>{
        return{
          ...item,
          isdishonest:item.dishonest?"是":"否",
          isloanMoney:item.loanMoney==0?"否":"有",
          ishasCriminalRecord:item.hasCriminalRecord?"是":"否",
          isoverdue:item.overdue?"是":"否"
        }
      })
      usedInfo.pageSize = res.pageSize

      usedInfo.total = res.total
       console.log( tableData.value)
      loading.value = false;
      
    };
    // 改变页码
    const handleCurrentChange = (val: number) => {
      usedInfo.pageNum = val;
      getUserInfo();
    };
    // 展开数据
    const tempTableData1 = [
      { label: "真实姓名:", prop: "name" },
      { label: "是否在失信人名单:", prop: "isdishonest" },
      { label: "是否有逾期记录:", prop: "isoverdue" },
      { label: "现在的工作状态:", prop: "workStatus" },
      { label: "身份证号:", prop: "idCardNum" },
      { label: "是否在本行贷款:", prop: "isloanMoney" },
      { label: "是否有犯罪记录:", prop: "ishasCriminalRecord" },
    ];
// 秒杀数据 
 let myKillDialogVisible = ref<boolean>(false)
   let MykillPage =reactive({
     myKillUserId:1,
     myKillNum:1,
      myKilltotal: 2,
      myKillpages: 2,
     myKillpageSize: 15,
   }) 
  let mySuccesstableData = ref([])
    const mySuccessList = async()=>{
    const {data:res} = await ApiGetUserSuccessById(MykillPage.myKillNum,MykillPage.myKillUserId) as Record<string,any>
      mySuccesstableData.value = res.list
        MykillPage.myKillpageSize =res.pageSize
        MykillPage.myKilltotal =res.total
        if(mySuccesstableData.value.length==0){
          warnMessage("当前的用户秒杀记录订单为0！！")
        }else{
         
          myKillDialogVisible.value = true
        }
         loading.value = false
       
  }
  const userKillBtn  = (info)=>{
       loading.value =true
      tempusername.value = info.username;
      MykillPage.myKillNum =1
      MykillPage.myKillUserId = info.id
      mySuccessList()

  }

 const MyKillhandleCurrentChange = (val: number) => {
      MykillPage.myKillNum = val;
      mySuccessList();
    };






    // 搜索操作
    let searchUserName =ref<string>("")
    const resetSearchName = ()=>{
      searchUserName.value=""
    }
    const searchUserBtn = async ()=>{
      if(searchUserName.value==""){
        return errorMessage("没有输入内容")
      }
         const res =  await ApiGetSearchUser(searchUserName.value)
         
    }
  

    // 用户搜索记录弹出框
    let userDetailDialogVisible = ref<boolean>(false);
    
    const detailDialogBtn = async  (info: any) => {
     loading.value =true
      tempusername.value = info.username;
      BookRecord_pageInfo.bookRecord_pageNum =1
      BookRecord_pageInfo.bookRecord_id = info.id
      getBookRecords(info.id)
      
    };
    // 用户申请记录
     let BookRecord_pageInfo = reactive({
      bookRecord_id:1,
      bookRecord_pageNum: 1,
      bookRecord_total: 2,
      bookRecord_pages: 2,
      bookRecord_pageSize: 15,
    })
      let bookRecordsData = ref([])
    
    const getBookRecords = async (id:number)=>{
      
        
        const {data:res} = await ApiGetUserRecordById(BookRecord_pageInfo.bookRecord_pageNum,id) as Record<string,any>
        bookRecordsData.value = res.list
        BookRecord_pageInfo.bookRecord_pageSize = res.pageSize
        BookRecord_pageInfo.bookRecord_pages = res.pages
        BookRecord_pageInfo.bookRecord_total = res.total
        if(bookRecordsData.value.length==0){
          warnMessage("当前用户申请记录为0！！")
        }else{
          userDetailDialogVisible.value = true;
        }
        loading.value=false
        
    }
       // 预约对话框改变页码
    const book_handleCurrentChange = (val: number) => {
      BookRecord_pageInfo.bookRecord_pageNum = val;
      getBookRecords(BookRecord_pageInfo.bookRecord_id);
    };
    





    onMounted( () => {
      getUserInfo();
      
    });
    return {
      tableData,
      ...toRefs(usedInfo),
      handleCurrentChange,
      tempTableData1,
      userDetailDialogVisible,
      detailDialogBtn,
      tempusername,
      loading,
      searchUserName,
      bookRecordsData,
      searchUserBtn,
      resetSearchName,
      book_handleCurrentChange,
      ...toRefs(BookRecord_pageInfo),
      mySuccesstableData,
      MyKillhandleCurrentChange,
      ...toRefs(MykillPage),
      myKillDialogVisible,
      userKillBtn
    
    };
  },
});
</script>
<style lang="less" scoped>
.el-row {
  display: flex;
  justify-content: center;
  h1 {
    color: rgb(109, 135, 221);
    font-size: 20px;
  }
}
.el-table {
  margin-top: 10px;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.row-total-search {
  display: flex;
  justify-content: space-between;
}
.el-form-item {
  margin-bottom: 0px;
}
</style>